/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-03-25 17:50:52
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-03-28 17:35:07
 * @FilePath: \vite-project\src\components\MenuTree\MenuTreeFilter.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import useOnce from '@/hooks/common/useOnce';
import { Input, Select, Space } from 'antd';
import { useState } from 'react';

interface MenuTreeFilterProps {
	placeholder?: string;
	keyInName?: string;
	onChange: (arg0: string, arg1: string) => void;
	api: () => Promise<any>;
}

const MenuTreeFilter: React.FC<MenuTreeFilterProps> = ({ placeholder = '请选择应用', keyInName = 'name', onChange, api }) => {
	const [loading, setLoading] = useState<boolean>(false);
	const [list, setList] = useState<
		{
			label: string;
			value: string;
		}[]
	>([]);

	// methods
	const getApplicationData = async () => {
		setLoading(true);
		try {
			let res: any = await api?.();
			const data: {
				label: string;
				value: string;
			}[] = (res?.recordDatas || [])?.map((item: { [x: string]: any; id: any }) => ({
				label: item[keyInName],
				value: item.id,
			}));
			setList(data);
		} finally {
			setLoading(false);
		}
	};
	useOnce(() => {
		getApplicationData();
	});
	return (
		<Space>
			<Select
				className="w-250px"
				loading={loading}
				options={list}
				placeholder={placeholder}
				onChange={value => onChange('appId', value)}></Select>
			<Input className="w-250px" placeholder="请输入关键词" onChange={e => onChange('appId', e.target.value)}></Input>
		</Space>
	);
};

export default MenuTreeFilter;
